<template>
    <el-dialog title="排课" :visible="visible" :close-on-click-modal="false" @close="close()">
        <el-form ref="form" label-width="100px">
            <el-form-item label="排课类型">
                <el-radio-group v-model="temp.type">
                    <el-radio label="date">指定日期</el-radio>
                    <el-radio label="week">每周</el-radio>
                    <el-radio label="day">每天</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 指定日期排课 -->
            <el-form-item v-if="temp.type === 'date'" label="日期">
                <el-date-picker v-model="temp.dates" type="dates" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
            </el-form-item>
            <!-- 指定周几排课 -->
            <el-form-item v-if="temp.type === 'week'" label="星期">
                <el-checkbox-group v-model="temp.weeks">
                    <el-checkbox label="1">周一</el-checkbox>
                    <el-checkbox label="2">周二</el-checkbox>
                    <el-checkbox label="3">周三</el-checkbox>
                    <el-checkbox label="4">周四</el-checkbox>
                    <el-checkbox label="5">周五</el-checkbox>
                    <el-checkbox label="6">周六</el-checkbox>
                    <el-checkbox label="0">周日</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
                <!-- 每日和每周排课需要指定起止时间 -->
                <el-form-item v-if="temp.type !== 'date'" label="日期范围">
                <div class="flex items-center">
                    <el-date-picker v-model="temp.start_date" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" />
                    <span class="ml-5 mr-5">至</span>
                    <el-date-picker v-model="temp.end_date" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" :picker-options="endDateOptions" />
                </div>
            </el-form-item>
            <!-- 上课时间 -->
            <el-form-item label="上课时间">
                <el-time-picker v-model="temp.time" placeholder="选择时间" value-format="HH:mm:ss" :picker-options="{selectableRange: '08:00:00 - 21:00:00'}" />
            </el-form-item>
            <el-form-item label="班级">
                <el-input :value="temp.class_name" class="w-250" readonly @click.native="selectClassVisible = true" />
            </el-form-item>
            <el-form-item label="课程">
                <el-select v-model="temp.course">
                    <el-option label="请选择课程" :value="0" />
                    <el-option v-for="item in classCourses" :key="item.id" :label="item.course_name" :value="item.id" />
                </el-select>
            </el-form-item>
            <!-- 这里的教室需要根据时间来动态获取空闲的教室 -->
            <el-form-item label="教室">
                <el-select v-model="temp.room" placeholder="请选择教室">
                    <el-option label="请选择教室" :value="0" />
                    <el-option v-for="item in rooms" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="消耗">
                <el-input v-model="temp.course_num" type="number" class="w-80 mr-10" />课时
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="handleAdd()">确 定</el-button>
        </span>
        <select-class :visible.sync="selectClassVisible" @select="handleSelectClass" />
    </el-dialog>
</template>
 <script>
  import dayjs from 'dayjs'
  import roomApi from '@/api/room'
  import classApi from '@/api/class'
  import courseArrangeApi from '@/api/course-arrange'
  import SelectClass from '../../components/SelectClass.vue'
  export default {
    name: 'ArrangeAdd',
    components: { SelectClass },
    props: {
        visible: { type: Boolean, default: false }
    },
    data() {
        return {
            dialogVisible: false,
            startDateOptions: {
                disabledDate: (time) => {
                    return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
                }
            },
            endDateOptions: {
                disabledDate: (time) => {
                    if (!this.temp.start_date) return true
                    const startDay = new Date(this.temp.start_date).setHours(0, 0, 0, 0)
                    return time.getTime() < startDay
                }
            },
            selectClassVisible: false, // 新增的属性
            temp: {
                type: 'week', // date:指定日期排课, week:按周排课, day: 每天排课
                room: 0,
                class: 0,
                course: 0,
                start_date: dayjs().format('YYYY-MM-DD'),
                end_date: '',
                dates: [],
                weeks: [],
                time: '',
                course_num: 1
            },
            classCourses: [],
            rooms: []
        }
    },
    created() {
    },
    mounted() {
        this.$nextTick(() => {
            // this.$refs.form.clearValidate() // 清空表单验证
            roomApi.list().then(res => { this.rooms = res.data })
        })
    },
    methods: {
        handleAdd() {
            const loading = this.$loading('加载中...')
            courseArrangeApi.add(this.temp).then(res => {
                this.$message({ type: 'success', message: '排课成功' })
                this.$emit('success', res.data)
                this.close()
            }).finally(() => {
                loading.close()
            })
        },
        handleSelectClass(classInfo) {
            this.temp.class = classInfo.id
            this.temp.class_name = classInfo.name
            this.temp.course = 0 // 重置课程为0，防止课程选择框显示上一次的课程
            classApi.getCourses(classInfo.id).then(res => { this.classCourses = res.data })
        },
        close() {
            this.$emit('update:visible', false)
        }
    }
  }
</script>
